<template lang="pug">
  .page
    .pl-20.pr-20.bg-white
      Table.hasTitle-table.beautiful-table(width="100%" :loading="loading" stripe :columns="thead" :data="listData" @on-selection-change="tableSelectChange")
        .pr-24.pl-24(slot="header")
          .pull-right.table-title-btns
            Button.mr-15(type="info" @click="createBtn('0')") 新增流程
        template(slot-scope="{ row, index }" slot="fileName")
          .u-d-info(@click="downloadFile(row.fileName, row.filePath)") {{row.fileName}}
        template(slot-scope="{ row, index }" slot="action")
          Button.mr-5(type="info" size="small" @click="reviseBtn(row.id)") 查看
          Button.mr-5(v-if="row.enable" type="warning" size="small" @click="enableWorkFlow(row.id, 0)") 禁用
          Button.mr-5(v-else type="info" size="small" @click="enableWorkFlow(row.id, 1)") 启用
        .clearfix.pl-20.pr-20(slot="footer")
          Page(:total="codeTotal" :current="PageIndex" :page-size="PageSize" prev-text="上一页" next-text="下一页" @on-change="pageChangeFn" show-total @on-page-size-change="onpageSizeChange" show-sizer :page-size-opts="[10, 20, 30, 50, 100]")
    create(ref="createModal" :businessesArr="businessesArr" :operatorArr="operatorArr" :accountList="accountList" @get-list="getList")
    check(ref="checkModal" :businessesArr="businessesArr" :operatorArr="operatorArr" :accountList="accountList" :formValidate="detailInfo" @get-list="getList")
</template>

<script>
import workflowApi from '@/api/workflow.api.js'
import dataApi from '@/api/data.js'
import UserApi from '@/api/User.api.js'
import create from './modal/create.vue'
import check from './modal/check.vue'

export default {
  name: 'workflow',
  components: {
    create,
    check
  },
  data () {
    return  {
      loading: false,
      thead: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          // fixed: 'left'
        },
        {
          title: '流程名称',
          minWidth: 100,
          align: 'center',
          key: 'processName'
        },
        {
          title: '适用表单',
          minWidth: 160,
          align: 'center',
          key: 'businessName'
        },
        {
          title: '创建人',
          minWidth: 160,
          align: 'center',
          key: 'createrName'
        },
        {
          title: '创建时间',
          minWidth: 160,
          align: 'center',
          render: (h, params) => {
            let row = params.row
            let times = row.createTime.slice(0, 19).replace(/T/g, ' ')
            return h('span', times)
          }
        },
        {
          title: '状态',
          minWidth: 160,
          align: 'center',
          render: (h, params) => {
            let row = params.row
            let text = row.enable?'启用':'禁用'
            return h('span', text)
          }
        },
        {
          title: '操作',
          minWidth: 160,
          align: 'center',
          slot: 'action'
        }
      ],
      workflowID: '0',
      businessesArr: [],
      operatorArr: [], // 审批人数组
      accountList: [], // 指定审批人数组
      listData: [],
      detailInfo: {},
      codeTotal: 0,
      PageIndex: 1,
      PageSize: 10,
    }
  },
  created () {
    this.getList()
    // this.getBusinesses()
    this.getAccount()
    this.getEnum()
  },
  methods: {
    getList () {
      workflowApi.GetList({
        name: '',
        PageIndex: this.PageIndex,
        PageSize: this.PageSize
      }).then(res => {
        console.log(res)
        if (res.data.success) {
          this.listData = res.data.data
          this.codeTotal = res.data.totalRows
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    // 启用禁用
    enableWorkFlow (id, val) {
      workflowApi.EnableWorkFlow({
        ID: id,
        Enable: val
      }).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.getList()
        } else {
          this.$Message.error({
            content: res.data.message,
            closable: true
          })
        }
      })
    },
    createBtn (id) {
      this.getBusinesses(id)
      this.$refs.createModal.openModal()
    },
    reviseBtn (id) {
      this.getBusinesses(id)
      console.log(id)
      this.$refs.checkModal.openModal()
      workflowApi.GetWorkFlow({
        id: id
      }).then(res => {
        console.log(res)
        this.detailInfo = res.data.data
        this.detailInfo.details.forEach(item => {
          if (item.operator === 4) {
            item.flag_operator = true
          }
          if (item.cc === 4) {
            item.flag_cc = true
          }
        })
      })
    },
    tableSelectChange () {

    },
    pageChangeFn (val) {
      this.PageIndex = val
      this.getList()
    },
    onpageSizeChange (val) {
      this.PageSize = val
      this.getList()
    },
    // 获取适用表单
    getBusinesses (id) {
      workflowApi.GetBusinesses({
        workflowID: id
      }).then(res => {
        console.log(res)
        this.businessesArr = res.data.data
      })
    },
    // 获取审批账号
    getAccount () {
      UserApi.getList({
        GetRoleName: true,
        Name: '',
        UserName: '',
        Phone: '',
        HasPaging: true,
        PageIndex: 1,
        PageSize: 1000,
        PowerType: 3
      }).then(res => {
        console.log(res)
        this.accountList = res.data.data
      })
    },
    /**
     * 数据字典
     */
    getEnum () {
      let groupNames = 'workflow.approver'
      dataApi.getEnum({
        groupName: groupNames
      }).then((res) => {
        this.operatorArr = this.getItems(res.data, 'workflow.approver')
      })
    },
    getItems (arr, key) {
      let object = arr.find((item) => {
        return item.group === key
      })
      return object.items
    }
  }
}
</script>
<style lang="less" scoped>

</style>


